<template>
    <div>
        <div v-for="commentIds in commentIdsList" :key="commentIds.id">
            <mycommentlist v-bind:commentIds="commentIds" ></mycommentlist>
        </div>
        <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
            <span slot="no-more">
                There is no more News :(
            </span>
        </infinite-loading>
    </div>
</template>
<script>

import { getComment } from '../api/example.js';
import mycommentlist from './mycommentlist'
import InfiniteLoading from "vue-infinite-loading";
export default {
    data(){
        return{            
            commentIdsList: [],
            page:1
        }
    },
    components:{
        mycommentlist,
        InfiniteLoading
    },
    methods:{
        // 获取评论消息 添加懒加载
        onInfinite() {            
            var vm = this
            getComment(this.page).then(res => {
                setTimeout(() => {
                    if (res.data.code === "success") {
                        console.log(res.data);
                        this.commentIdsList = this.commentIdsList.concat(res.data.data.comments);
                    } else {
                        console.log(res.data.message);
                    }

                    if (Math.ceil(res.data.data.counts / 4) === this.page) {
                        this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
                    } else {
                        this.$refs.infiniteLoading.$emit("$InfiniteLoading:loaded");
                        this.page++;
                    }
                }, 1000);
            });
        },
        formattime(time) {
            return moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
    }
}
</script>
<style scoped>

</style>
